<template>
	<view class="box">
		<view class="inputbox">
			<input type="text" value="衣柜实木" class="sousuo" />
			<text class="iconfont icon-sousuo"></text>
		</view>
		<view class="contentbox">
			<view class="left">
				<view class="leftcontent" :class="{chexed:chexedindex==index}" v-for="(item,index) in arr1" :key="index" @click="xuanzhe(index,item.good_type_id)">
					{{item.type_name}}
				</view>
			</view>
			<view class="right">
				<view class="first" v-for="(item,index) in arr2" :key="index" v-if="item.parent_id==id">
					<view class="recommend">{{item.type_name}}</view>
					<view class="firstbox">
						<view class="cont" v-for="(items,indexs) in arr" :key="indexs" v-if="items.parent_id==item.good_type_id">
							<image class="images" src="../../static/5.jpg" mode=""></image>
							<view class="name">
								{{items.type_name}}
							</view>
							<view class="names">
								爆款5折起
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				arr:[],
				arr1: [],
				arr2: [],
				fts: "",
				chexedindex: 0,
				id:1322
			}
		},
		onLoad() {
			uni.request({
				url: 'http://api_devs.wanxikeji.cn/api/goodType',
				method: "POST",
				success: (res) => {
					this.arr=res.data.data
					for (let i = 0; i < res.data.data.length; i++) {
						if (res.data.data[i].parent_id == 0) {
							this.arr1.push(res.data.data[i])
						}
						for (let j = 0; j < this.arr1.length; j++) {
							if (res.data.data[i].parent_id == this.arr1[j].good_type_id) {
								this.arr2.push(res.data.data[i])
							}
						}
					}

					console.log(this.arr2);

				}
			});
		},
		methods: {
			xuanzhe(index,id) {
				this.chexedindex = index
				for(let i=0;i<this.arr2.length;i++){
					
				}
				this.id=id
			},
		},

	}
</script>

<style>
	.box {}

	.inputbox {
		position: fixed;
		padding: 15rpx;
		box-sizing: border-box;
		height: 100rpx;
		width: 100%;
		border-bottom: 1px solid #F1F1F1;
		top: 4.5%;
		background-color: #FFFFFF;
		line-height: 100rpx;
	}

	.sousuo {
		background-color: #F1F1F1;
		width: 70%;
		height: 67rpx;
		border-radius: 40rpx;
		padding-left: 50rpx;
		box-sizing: border-box;
		color: #999999;
		margin-top: -7px;
	}

	.inputbox .icon-sousuo {
		position: absolute;
		margin-top: -10.5%;
		font-size: 20px !important;
		margin-left: 9rpx;
		font-weight: 700;
	}

	.contentbox {
		margin-top: 160rpx;
		display: flex;
		justify-content: left;
	}

	.left {
		width: 31%;
		height: 88vh;
		overflow-y: auto;
	}

	.leftcontent {
		height: 59px;
		/* height: 12%; */
		background-color: #F1F1F1;
		line-height: 59px;
		text-align: center;
		font-size: 15px;
		box-sizing: border-box;
	}

	.chexed {
		background: #FFFFFF;
	}
	.right{
		width: 69%;
		height: 88vh;
		overflow-y: auto;
		background-color: #FFFFFF;
		padding: 5px 10px 10px 10px;
		box-sizing: border-box;
	}
	.right .first{
		background-color: #FFFFFF;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 10px;
		box-shadow:5px 5px 5px #F1F1F1 ;
		margin-bottom: 5px;
	}
	.recommend{
		font-size: 17px;
		font-weight: 700;
		margin-bottom: 10px;
	}
	.firstbox{
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
		border-radius: 10px;
		box-shadow: #C8C7CC;
	}
	.firstbox .cont{
		width: 130rpx;
		margin: 5px;
	}
	.firstbox .cont .images{
		width: 130rpx;
		height: 130rpx;
	}
	.right .firstbox .name{
		text-align: center;
		font-size: 13px;
		font-weight: 700;
		margin-top: 3px;
	}
	.right .firstbox .names{
		text-align: center;
		font-size: 10px;
		font-weight: 700;
		color: #D14A4B;
		margin-top: 3px;
	}
</style>
